<script setup>
import { ref, watch } from 'vue';    
import { get, post } from '@/api/index.js';
import commonTable from '@/components/CommonTable.vue';
import commonFormItem from '@/components/CommonFormItem.vue';
import useDialogStore from "@/stores/dialog.js";
const dialogStore = useDialogStore();
const tableConfig_outboundRecord = ref({
    hasPage: true,
    tableColumn: { 
        create_time: { text: "外呼时间" },
        callUserName: { text: "外呼专员" },
        called_status: { text: "拨打状态" },
        show_phone_num: { text: "外显号码" },
        called_to_str: { text: "沟通对象" },
        called_result_str: { text: "沟通结果" },
        nonuse_reason_str: { text: "未使用原因" },
        award_type_str: { text: "选择福利" },
        called_record: { text: "沟通内容" },
        is_get_called_detail: { text: "是否获取到通话明细" },
        talk_length: { text: "通话时长(秒)" },
        sessionId: { text: "sessionId" },
        registerState: { text: "数据来源" },
    },
    tableData:[],
    click: () => {}
});

get("/operate/outboundTask/outboundOperationRecordLefNf", { outboundObjectId: dialogStore.custId }).then(res => {
    tableConfig_outboundRecord.value.tableData = res.data;
});

const formConfig = ref([
    { label:'沟通对象', type:'select', placeholder:'请选择', children: [ { label: '客户本人', value: '客户本人' }, { label: '家庭成员', value: '家庭成员' }, { label: '客户朋友', value: '客户朋友' }, { label: '无法验证', value: '无法验证' }, { label: '10S以下', value: '10S以下' }, { label: '通话中断', value: '通话中断' }, { label: '其它', value: '其它' } ] },
    { label:'沟通结果', type:'input', placeholder:'请输入' },
    { label:'未使用原因', type:'input', placeholder:'请输入' },
    { label:'跟进情况', type:'input', placeholder:'请输入' },
    { label:'电话状态', type:'input', placeholder:'请输入' },
]);
</script>
<template>
    <div class="container">
        <el-dialog width="95%" top="1vh" v-model="dialogStore.display" title="外呼营销">
            <div class="dialogContainer">
                <el-divider content-position="left">历史外呼记录</el-divider>
                <common-table :table="tableConfig_outboundRecord"></common-table>
                <el-divider content-position="left">客户用信记录</el-divider>
                <common-table></common-table>
                <el-divider content-position="left">客户信息详情</el-divider>
                <common-table></common-table>
                <div class="form_content">
                    <div>
                        <common-form-item style="width: 250px;"
                            :formItemConfig="{ label:'外呼技能组', type:'select', placeholder:'请输入号码', value: '街电外呼乐e付1', children: [ { label: '街电外呼乐e付1', value: '街电外呼乐e付1' }, { label: '街电外呼乐e付2', value: '街电外呼乐e付2' }, { label: '街电外呼乐e付3', value: '街电外呼乐e付3' }, { label: '街电外呼乐e付4', value: '街电外呼乐e付4' } ] }"
                        ></common-form-item>
                        <div class="inlineBlock paddingLeft20">
                            <el-button type="primary">拨打电话</el-button>
                            <el-button type="primary">新增外呼记录</el-button>
                        </div>
                        <el-form>
                            <el-row :gutter="20" class="paddingTop20">
                                <el-col :span="8" v-for="(item,index) in formConfig" :key="index" style="padding: 10px;">
                                    <common-form-item style="width: 200px;" :formItemConfig="item"></common-form-item>
                                </el-col>
                                <el-col :span="24" :offset="0" style="padding: 10px;">
                                    <common-form-item style="width: 500px; " :formItemConfig="{ label: '沟通记录', type: 'textarea' }"></common-form-item>
                                </el-col>
                            </el-row>
                            <el-button disabled type="success" style="margin-left: 70px;">提交</el-button>
                        </el-form>
                    </div>
                </div>
            </div>
        </el-dialog>
        
    </div>
</template>
<style lang="scss" scoped>
.container{
    .form_content {
        width: 800px;
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: left;
        .skillSelect {
            width: 200px;
            margin-left: 10px;
        }
        .inlineBlock {
            display: inline-block;
        }
        .paddingLeft20 {
            padding-left: 20px;
        }
        .paddingTop20 {
            padding-top: 20px;
        }
    }
}
</style>